<template>
  <section class="memberRule">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="vipRuleList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="会员级别名称" width="150"/>
			<el-table-column prop="remark" label="规则描述" width="200"/>
			<el-table-column prop="effective_time" label="任期(年)" width="100"/>
      <el-table-column prop="cost_standard" label="会费标准" width="120"/>
			<el-table-column prop="number_limit" label="该级别人员上限" width="120"/>
      <el-table-column prop="created_at" label="创建时间" width="180"/>
      <el-table-column prop="sort" label="排序" width="100"/>
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editorRule(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini"  @click="delVipRule(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
          background 
          layout="prev, pager, next" 
          :total="pageTotal"
					:page-size="limit"
					@current-change="getVipRuleList"
        >
        </el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      class="editor-dialog"
      :title="dialogTit"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="120px">
        <el-form-item label="会员等级" >
          <el-input v-model="addForm.level" type="number" placeholder="会员等级从1开始"></el-input>
        </el-form-item>
        <el-form-item label="级别前缀" >
          <el-input v-model="addForm.prefix" placeholder="输入会员等级的前三英文大写字母"></el-input>
        </el-form-item>
        <el-form-item label="会员级别名称" >
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="规则描述">
          <el-input v-model="addForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="会费标准">
          <el-input v-model="addForm.cost_standard" ></el-input>
        </el-form-item>
        <el-form-item label="任期">
          <el-input v-model="addForm.serviceYear" type="number"></el-input>
        </el-form-item>
        <el-form-item label="该级别人员上限" >
          <el-input v-model="addForm.maxNum" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="setVipRule">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
      dialogTit:'',
			vipRuleList:[],
      dialogVisible:false,//编辑状态的弹窗
      pageTotal:0,
			limit:16,
      addForm:{
        id:'',
        level:'',
        prefix: '',
        name:'',
        desc:'',
        cost_standard:'',//每届费用
        serviceYear:'',//任期
        maxNum:'',//人员上限
        sort:'',//排序
      },//弹窗的信息
      editorFlag:''//编辑状态
		}
  },
  mounted(){
    this.getVipRuleList();
  },
  methods: {

    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
    newRule(){
      //新增
      this.editorFlag=false;
      this.initData();
      this.dialogTit='新增会员级别'
      this.dialogVisible = true
    },
    editorRule(id){
      this.editorFlag=true
      this.initData();
      this.getVipRuleDetail(id);
      this.dialogTit='编辑会员级别'
      this.dialogVisible = true
    },
    handleClose(){
      this.initData();
    },
    //添加||编辑确定按钮
    async setVipRule(){
      var params
      if(this.dialogTit == '新增会员级别'){
        params = {
          level:this.addForm.level,
          prefix:this.addForm.prefix,
          name:this.addForm.name,
          remark:this.addForm.desc,
          cost_standard:this.addForm.cost_standard,
          effective_time:this.addForm.serviceYear,
          number_limit:this.addForm.maxNum,
          sort:this.addForm.sort,
        }
      }else{
        params = {
          id:this.addForm.id,
          level:this.addForm.level,
          prefix:this.addForm.prefix,
          name:this.addForm.name,
          remark:this.addForm.desc,
          cost_standard:this.addForm.cost_standard,
          effective_time:this.addForm.serviceYear,
          number_limit:this.addForm.maxNum,
          sort:this.addForm.sort,
        }
      }
      const res = await this.$api.setVipRule(params);
      if(res.data.level=='success'){
        this.$message({
          type: 'success',
          message: res.data.message
        });
        this.dialogVisible = false;
        this.getVipRuleList();
      }else{
        this.$message({
          type: 'error',
          message: res.data.message
        });
      }
    },
    //获取会员级别信息详情
    async getVipRuleDetail(id){
      const params = {
        id,
      }
      this.addForm.id = id;
      const res = await this.$api.getVipRuleDetail(params);
      if(res.data.level=='success'){
        this.addForm.level = res.data.data.level|| '';
        this.addForm.prefix = res.data.data.prefix || '';
        this.addForm.name = res.data.data.name|| '';
        this.addForm.desc = res.data.data.remark || '';
        this.addForm.cost_standard = res.data.data.cost_standard || '';
        this.addForm.serviceYear = res.data.data.effective_time || '';
        this.addForm.maxNum = res.data.data.number_limit || '';
        this.addForm.sort = res.data.data.sort || '';
      }else{
        this.$message({
          type: 'error',
          message: res.data.message
        });
      }
    },
    //获取会员级别列表
    async getVipRuleList(page){
      let params = {
				limit:this.limit,
				page:page || 1,
			}
      const res=await this.$api.getVipRuleList(params);
      if(res.data.level=='success'){
        this.vipRuleList = res.data.data;
        this.pageTotal = res.data.page_info.total
      }else{
        this.$message({
          type: 'error',
          message: res.data.message
        });
      }
    },
    delVipRule(id){
			//删除会员级别
			const judge= this.$confirm('删除该会员规则?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delVipRule({id});
					if(res.data.level=='success'){
						this.getVipRuleList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    initData(){
      this.addForm={
        level:'',
        prefix: '',
        name:'',
        desc:'',
        serviceYear:'',//任期
        cost_standard:'',
        maxNum:''//人员上限
      }//弹窗的信息弹窗的信息
    }
  },
}
</script>
<style lang='scss' scoped>
  .memberRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .memberRule .el-dialog__body{overflow: auto;}
</style>
